<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>jxDialog Sample</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				line-height: 1.5;
			}
			h1 {
				padding-bottom: 0.4em;
				border-bottom: 1px solid black;
			}
			table th {
				text-align: right;
			}
			#container {
				margin: 2em;
			}
			.source {
				background-color: #ccc;
				border: 1px solid black;
				margin: 1em 0 1em 2em;
			}
			.sample {
				border: 1px dotted #265DC9;
				background-color: #9BBBFA;
				padding: 0 1em 1em 1em;
				margin-bottom: 1em;
			}
			.sample h3 {
				background-color: #265DC9;
				padding: 0.5em;
			}
		</style>
		<script type="text/javascript" src="jxDialog.js"></script>
		<script type="text/javascript">
//<![CDATA[
	var alertTest = function() {
		jxDialog.alert({
			message: 'alert is called',
			onFinish: function() {alert('OK'); }
		});
	}
	var confirmTest = function() {
		jxDialog.confirm({
			message: 'confirm is called',
			onFinish: function(bool) {alert(bool); }
		});
	}
	var promptTest = function() {
		jxDialog.prompt({
			message: 'prompt is called',
			onFinish: function(value) {alert(value); }
		});
	}
	var promptTestPassword = function() {
		jxDialog.prompt({
			message: 'prompt is called',
			promptInputType: 'password',
			onFinish: function(value) {alert(value); }
		});
	}
	var simpleTestHtml = function() {
		jxDialog.simple({
			message: '<h2 style="margin: 0.1em;">Login Form</h2><table style="width: 100%;"><colgroup style=""/><tr><th>Roll:</th><td colspan="2"><select name="roll" style="width: 100%;"><option>admin</option><option>user</option><option>backup</option></td></tr><tr><th>User:</th><td colspan="2"><input type="text" name="user" style="width: 100%;"/></td></tr><tr><th>Password:</th><td colspan="2"><input type="password" name="password" style="width: 100%;"/></td></tr><tr><td></td><td><input type="checkbox" name="rememver" id="remember"/><label for="remember">rember me</label></td><td style="text-align: right;"><input type="submit" value="Login" onclick="alert(\'login\');jxDialog.close();"/></td></tr></table>',
			format: 'html',
			closeButton: "Close",
			onFinish: function(value) {alert(value); }
		});
	}
	var simpleTestText = function() {
		jxDialog.simple({
			message: '<div>Do not recognize HTML</div>',
			format: 'text', // default
			closeButton: "Close",
			onFinish: function(value) {alert(value); }
		});
	}

	var attachTest = function() {
		jxDialog.attach({
			dialog: document.getElementById('loginDialog'),
			closeButton: document.getElementById('loginDialogCloseButton'),
			width: Math.min(400, (document.documentElement || document.body).clientWidth || window.innerWidth)
		});
	}

	var alertOptionTest= function() {
		jxDialog.alert({
			message: 'alert is called',
			backgroundColor: '#7FDDFA',
			overlayBackgroundColor: '#ff0000',
			width: 600,
			onFinish: function() {alert('OK'); }
		});
	}
	var confirmOptionTest = function() {
		jxDialog.confirm({
			message: 'confirm is called',
			duration: 5000,
			opacity: 1,
			onFinish: function(bool) {alert(bool); }
		});
	}
	var promptOptionTest = function() {
		jxDialog.prompt({
			message: 'prompt is called',
			transition: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; },
			onFinish: function(value) {alert(value); }
		});
	}
//]]>
		</script>
	</head>
	<body>
		<div id="container">
			<h1>jxDialog Sample</h1>
			<table>
			<tr>
			<th>Author</th>
			<td>Jiro Iwamoto</td>
			</tr>
			<tr>
			<th>License</th>
			<td>MIT License</td>
			</tr>
			<tr>
			<th>Project URL</th>
			<td><a href="http://code.google.com/p/jxdialog/">http://code.google.com/p/jxdialog/</a></td>
			</tr>
			</table>
			<div class="sample">
				<h3>function style sample</h3>
				<input type="button" value="simple html" onclick="simpleTestHtml();"/>
				<pre class="source">
jxDialog.simple({
	message: innerHTML,
	closeButton: "Close",
	onFinish: function(value) {alert(value); }
}); 
// you can also use object format
new jxDialog.Simple(...)
</pre>
				<input type="button" value="simple text" onclick="simpleTestText();"/>
				<pre class="source">
jxDialog.simple({
	message: '&lt;div&gt;Do not recognize HTML&lt;/div&gt;',
	format: 'text', // default
	closeButton: "Close",
	onFinish: function(value) {alert(value); }
}); 
// you can also use object format
new jxDialog.Simple(...)
</pre>
				<input type="button" value="alert" onclick="alertTest();"/>
				<pre class="source">
jxDialog.alert({
	message: 'alert is called',
	onFinish: function() {alert('OK'); }
}); 
// you can also use object format
new jxDialog.Alert(...)
</pre>
				<input type="button" value="confirm" onclick="confirmTest();"/>
				<pre class="source">
jxDialog.confirm({
	message: 'confirm is called',
	onFinish: function(bool) {alert(bool); }
}); 
// you can also use object format
new jxDialog.Confirm(...)
</pre>
				<input type="button" value="prompt" onclick="promptTest();"/>
				<pre class="source">
jxDialog.prompt({
	message: 'prompt is called',
	onFinish: function(value) {alert(value); }
}); 
// you can also use object format
new jxDialog.Prompt(...)
</pre>
				<input type="button" value="prompt password" onclick="promptTestPassword();"/>
				<pre class="source">
jxDialog.prompt({
	message: 'prompt is called',
	promptInputType: 'password',
	onFinish: function(value) {alert(value); }
}); 
// you can also use object format
new jxDialog.Prompt(...)
</pre>
				<input type="button" value="attach" onclick="attachTest();"/>
				<pre class="source">
jxDialog.attach({
	dialog: document.getElementById('loginDialog'),
	closeButton: document.getElementById('loginDialogCloseButton'),
	width: Math.min(400, (document.documentElement || document.body).clientWidth || window.innerWidth)
});
// you can also use object format
new jxDialog.Attach(...)
HTML:
&lt;div id=&quot;loginDialog&quot; style=&quot;display: none;&quot;&gt;
  &lt;div style=&quot;padding: 10px 10px 0px; background-color: white;&quot;&gt;
    &lt;div style=&quot;margin: 0pt;&quot;&gt;
      &lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
        &lt;table class=&quot;formInput&quot;&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;label for=&quot;block_auth_name&quot;&gt;メールアドレス&lt;/label&gt;&lt;/th&gt;
              &lt;td&gt;&lt;input id=&quot;block_auth_name&quot; name=&quot;auth_name&quot; class=&quot;middle&quot; /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;label for=&quot;block_passphrase&quot;&gt;パスワード&lt;/label&gt;&lt;/th&gt;
              &lt;td&gt;&lt;input type=&quot;password&quot; id=&quot;block_passphrase&quot; name=&quot;passphrase&quot; class=&quot;middle&quot; /&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div&gt;
          &lt;input name=&quot;remember&quot; id=&quot;block_remember&quot; type=&quot;checkbox&quot;/&gt;
          &lt;label for=&quot;block_remember&quot;&gt;次回から自動的にログイン&lt;/label&gt;&lt;br /&gt;
          &lt;input name=&quot;process&quot; value=&quot;ログイン&quot; type=&quot;button&quot; /&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div style=&quot;text-align: right; margin-top: 0.2em;&quot;&gt;&lt;a
        id=&quot;loginDialogCloseButton&quot; href=&quot;javascript: void(0);&quot;&gt;取り消す&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div style=&quot;margin: 0px 1px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 1px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 1px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 2px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 2px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 3px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 4px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 5px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 6px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;margin: 0px 9px; overflow: hidden; height: 1px; background-color: white;&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
			</div>

			<div class="sample">
				<h3>options sample</h3>
				<input type="button" value="alert" onclick="alertOptionTest();"/>
				<pre class="source">
jxDialog.alert({
	message: 'alert is called',
	backgroundColor: '#7FDDFA',
	overlayBackgroundColor: '#ff0000',
	width: 600,
	onFinish: function() {alert('OK'); }
});</pre>
				<input type="button" value="confirm" onclick="confirmOptionTest();"/>
				<pre class="source">
jxDialog.confirm({
	message: 'confirm is called',
	duration: 5000,
	opacity: 1,
	onFinish: function(bool) {alert(bool); }
});</pre>
				<input type="button" value="prompt" onclick="promptOptionTest();"/>
				<pre class="source">
jxDialog.prompt({
	message: 'prompt is called',
	transition: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; },
	onFinish: function(value) {alert(value); }
}); </pre>
			</div>
			<div id="loginDialog" style="display: none;">
				<div style="padding: 10px 10px 0px; background-color: white;">
					<div style="margin: 0pt;">
						<form action="" method="post">
							<table class="formInput"><tbody>
									<tr><th><label for="block_auth_name">メールアドレス</label></th>
										<td><input id="block_auth_name" name="auth_name" class="middle"
											/></td></tr>
									<tr><th><label for="block_passphrase">パスワード</label></th>
										<td><input type="password" id="block_passphrase"
											name="passphrase" class="middle" /></td></tr>
								</tbody>
							</table>
							<div>
								<input name="remember" id="block_remember" type="checkbox"
								/><label for="block_remember">次回から自動的にログイン</label><br />
								<input name="process" value="ログイン" type="button" />
							</div>
						</form>
					</div>
					<div style="text-align: right; margin-top: 0.2em;"><a
							id="loginDialogCloseButton" href="javascript: void(0);">取り消す</a></div>
				</div>
				<div>
					<div style="margin: 0px 1px; overflow: hidden; height: 1px;
						background-color: white;"></div><div style="margin: 0px 1px; overflow:
						hidden; height: 1px; background-color: white;"></div><div
						style="margin: 0px 1px; overflow: hidden; height: 1px;
						background-color: white;"></div><div style="margin: 0px 2px; overflow:
						hidden; height: 1px; background-color: white;"></div><div
						style="margin: 0px 2px; overflow: hidden; height: 1px;
						background-color: white;"></div><div style="margin: 0px 3px; overflow:
						hidden; height: 1px; background-color: white;"></div><div
						style="margin: 0px 4px; overflow: hidden; height: 1px;
						background-color: white;"></div><div style="margin: 0px 5px; overflow:
						hidden; height: 1px; background-color: white;"></div><div
						style="margin: 0px 6px; overflow: hidden; height: 1px;
						background-color: white;"></div><div style="margin: 0px 9px; overflow:
						hidden; height: 1px; background-color: white;"></div>
				</div>
			</div>
		</div>
		<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			_uacct = "UA-313823-6";
			urchinTracker();
			</script>

		</body>
	</html>
